<template>
  <div class="editBranchBox" style="width: 800px; margin-top: 20px">
    <h4 style="padding-left: 100px; margin-bottom: 10px">
      分公司管理/新增分公司
    </h4>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="280px"
      class="demo-ruleForm"
    >
      <el-form-item label="公司名称:" prop="companyName">
        <el-input v-model="ruleForm.companyName"></el-input>
      </el-form-item>
      <el-form-item label="简称:" prop="companyAbbreviation">
        <el-input v-model="ruleForm.companyAbbreviation"></el-input>
      </el-form-item>
      <el-form-item label="地理区位: ">
        <MyCity v-model="provAndCity" />
      </el-form-item>

      <el-form-item label="地址:" prop="companyAddress">
        <el-input v-model="ruleForm.companyAddress">
          <el-button
            slot="append"
            icon="el-icon-plus"
            @click="addAddress"
          ></el-button>
        </el-input>
        <el-input
          v-for="(list, index) in lists"
          :key="list.id"
          style="margin-top: 20px"
        >
          <el-button
            slot="append"
            icon="el-icon-minus"
            @click="lists.splice(index, 1)"
          ></el-button>
        </el-input>
      </el-form-item>

      <el-form-item label="电话:" prop="telNumber">
        <el-input v-model="ruleForm.telNumber"></el-input>
      </el-form-item>
      <el-form-item label="网站:" prop="website">
        <el-input v-model="ruleForm.website"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="$router.push({ name: 'BranchManage' })"
          >取消</el-button
        >
        <el-button type="primary" @click="addBranchCompany()"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入联动子组件
import MyCity from "../../components/city.vue";
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      let regMobile = /^[1]([3-9])[0-9]{9}$/;

      if (!regMobile.test(value)) {
        callback(new Error("手机号码输入不规范"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        branchId:"",
        companyName: "",
        companyAbbreviation: "",
        telNumber: "",
        website: "",
        addAddress: "",
        companyAddress: "",
        location:""
      },
      rules: {
        companyName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        companyAbbreviation: [{ required: true, message: "请输入公司简称", trigger: "blur" }],
        telNumber: [{ required: true, validator: validateMobile, trigger: "blur" }],
        website: [{ required: true, message: "请输入公司网站", trigger: "blur" }],

        // address: [{ required: true, message: "请输入公司地址", trigger: "blur" }],
      },

      newAddress: "",
      lists: [],
      nextToDoId: 1,
      provAndCity: {
        province: "", // 城市
        city: "",
      },
    };
  },
  methods: {
    addAddress() {
      this.lists.push({
        id: this.nextToDoId++,
        title: this.newAddress,
      });
      this.newAddress = "";
      if (this.lists.length > 3) {
        this.$message({
          message: "不允许添加了",
          type: "warning",
        });
        this.lists.length = 4;
      }
    },

    // 添加分公司功能
  async addBranchCompany() {
      //   1 表单的验证
      //   2 验证通过后 发送请求
      //   3 发送请求成功后关闭弹框  重新刷新页面

      this.ruleForm.location = `${this.provAndCity.city},${this.provAndCity.province}`
      //  1 表单的验证
      let success = await this.$refs["ruleForm"].validate().catch(() => {});
      console.log(success);

      if (!success) return false;
      // 2 验证通过后 发送请求
      let {
        meta: { status },
      } = await this.$http.getAddBranchCompany(this.ruleForm);
        // console.log(data);
      if (status == 200) {
        this.$message.success("添加成功");

        // 重新刷新页面
        this.$router.push({name:'BranchManage'})
      }
    },
  },
  components: {
    MyCity,
  },
};
</script>

<style>
</style>